<template>
  <div class='container'>
        <el-card>
          <!-- 表单区域 -->
          <el-form :inline="true">
           <div>
              <el-form-item label="关键字">
                <el-input v-model="queryInfo.keyword" size="small"></el-input>
              </el-form-item>
              <el-form-item label="状态">
                <el-select v-model="queryInfo.state" size="small" placeholder="请选择">
                  <el-option label="已启用" value="1"></el-option>
                  <el-option label="已禁用" value="0"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item class="btn">
                <el-button  size="small" @click="clear">清除</el-button>
                <el-button type="primary"  size="small" @click="search">搜索</el-button>
              </el-form-item>
           </div>
           <el-row>
             <el-col>
              <el-button  size="mini" type="success" icon="el-icon-edit" class="edit" @click="dialogAddShow=true">新增技巧</el-button>
             </el-col>
           </el-row>
          </el-form>
          <!-- 表单区域 -->

          <!-- 警告提示信息区域 -->
          <el-row>
            <el-col>
              <el-alert  type="info" show-icon>
                <span slot="title">数据一共{{allCounts}}条</span>
              </el-alert>
            </el-col>
          </el-row>
          <!-- 警告提示信息区域 -->

          <!-- 表格区域 -->
          <el-table :data="tableData" style="width: 100%">
            <el-table-column type="index" label="序号"></el-table-column>
            <el-table-column label="文章标题" width="400">
              <template slot-scope="scope">
                <span>{{scope.row.title}}</span>
                <i v-if="scope.row.videoURL" class="el-icon-film" @click="playVideo(scope.row)"></i>
              </template>
            </el-table-column>
            <el-table-column prop="" label="阅读数" width="110">0</el-table-column>
            <el-table-column prop="username" label="录入人"></el-table-column>
            <el-table-column prop="createTime" label="录入时间" width="210"></el-table-column>
            <el-table-column label="状态" width="100">
              <template  slot-scope="scope">
                <span v-if="scope.row.state===0">已禁用</span>
                <span v-else>已启用</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="200">
              <template slot-scope="scope">
                <el-link type="primary" @click="onPreview(scope.row)" >预览</el-link>
                <el-link type="primary">
                  <span v-if="scope.row.state===0" @click="setState(scope.row)">启用</span>
                  <span v-else @click="setState(scope.row)">禁用</span>
                </el-link>
                <el-link :type="scope.row.state===0? 'primary' : 'info'" :disabled="scope.row.state===0? false : true" @click="editShow(scope.row.id)">修改</el-link>
                <el-link :type="scope.row.state===0? 'primary' : 'info'" :disabled="scope.row.state===0? false : true" @click="deleteArticle(scope.row.id)">删除</el-link>
              </template>
            </el-table-column>
          </el-table>
          <!-- 表格区域 -->

          <!-- 分页区域 -->
          <div class="fenye">
              <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.page" :page-sizes="[5, 10, 15, 20]" :page-size="queryInfo.pagesize" layout=" prev, pager, next, sizes, jumper" :total="allCounts"></el-pagination>
          </div>
          <!-- 分页区域 -->
        </el-card>
        <!-- 播放视频弹出层 -->
        <el-dialog class="video" :visible.sync="dialogVideoShow" width="55%" top="130px" :show-close="false">
          <div class="close" @click="videoClose">
            <i class="el-icon-close"></i>
          </div>
          <!-- <div class='demo'> -->
              <video-player class="video-player vjs-custom-skin"
                            ref="videoPlayer"
                            :playsinline="true"
                            :options="playerOptions">
              </video-player>
          <!-- </div> -->

        </el-dialog>
        <!-- 播放视频弹出层 -->

        <!-- 文章预览弹出层 -->
          <el-dialog :visible.sync="dialogPreviewShow" class="preview" title="文章预览">
            <Articles-preview v-if="dialogPreviewShow" :content="this.previewContent"></Articles-preview>
          </el-dialog>
        <!-- 文章预览弹出层 -->

        <!-- 新增文章弹出层 -->
          <el-dialog :visible.sync="dialogAddShow" title="新增文章" @close="addClose">
            <add-article :addForm="addForm"  v-if="dialogAddShow"  ref="addRef"></add-article>

            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogAddShow = false">取 消</el-button>
              <el-button type="primary" @click="onAddArticle">确 定</el-button>
            </span>
          </el-dialog>
        <!-- 新增文章弹出层 -->

        <!-- 修改文章弹出层 -->
        <el-dialog :visible.sync="dialogeditShow" title="新增文章" @close="addClose">
            <add-article :addForm="addForm" v-if="dialogeditShow"  ref="addRef"></add-article>

            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogeditShow = false">取 消</el-button>
              <el-button type="primary" @click="editArticle">确 定</el-button>
            </span>
          </el-dialog>
        <!-- 修改文章弹出层 -->
  </div>
</template>

<script>
import ArticlesPreview from '../components/articles-preview'
import AddArticle from '../components/articles-add'
import { list, changeState, add, remove, detail, update } from '@/api/hmmm/articles.js'
import { parseTimeByString } from '@/filters'

export default {
  components: {
    ArticlesPreview,
    AddArticle
  },
  data () {
    return {
      formInline: '',
      tableData: [], // 表格数据
      allCounts: 0, // 总数据条数
      queryInfo: {
        page: 1, // 页码数
        pagesize: 10, // 当前页数据条数
        keyword: null, // 搜索关键字
        state: null // 数据状态
      },
      previewContent: '',
      dialogAddShow: false,
      dialogPreviewShow: false,
      dialogVideoShow: false, // 视屏播放显示
      playerOptions: {
        // 播放速度
        playbackRates: [0.5, 1.0, 1.5, 2.0],
        // 如果true,浏览器准备好时开始回放。
        autoplay: true,
        // 默认情况下将会消除任何音频。
        muted: true,
        // 导致视频一结束就重新开始。
        loop: false,
        // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        preload: 'auto',
        language: 'zh-CN',
        // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        aspectRatio: '16:9',
        // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        fluid: true,
        // 你的封面地址
        poster: '',
        sources: [{
        // 类型
          type: 'video/mp4',
          // url地址
          src: ''
        }],
        // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        notSupportedMessage: '此视频暂无法播放，请稍后再试',
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          // 全屏按钮
          fullscreenToggle: true
        }

      },
      dialogeditShow: false,
      addForm: {
        title: '',
        articleBody: '',
        videoURL: ''
      },
      editForm: {}

    }
  },
  created () {
    // 获取文章列表数据
    this.getArticlesList()
  },
  mounted () {},
  methods: {
    handleSizeChange (newSize) {
      this.queryInfo.pagesize = newSize
      this.getArticlesList()
    },
    handleCurrentChange (newPage) {
      this.queryInfo.page = newPage
      this.getArticlesList()
    },

    // 清空列表
    clear () {
      this.crucialName = ''
    },
    // 获取列表
    async getArticlesList () {
      try {
        const { data } = await list(this.queryInfo)
        this.allCounts = data.counts
        this.tableData = data.items
        // 处理时间
        this.tableData.forEach(item => {
          item.createTime = parseTimeByString(item.createTime)
        })
      } catch (error) {
        this.$message.error('获取数据失败，请稍后重试')
      }
    },
    // 搜索功能
    search () {
      this.queryInfo.page = 1
      this.getArticlesList()
    },
    // 播放电影
    playVideo (item) {
      this.playerOptions.sources[0].src = item.videoURL
      this.dialogVideoShow = true
    },
    videoClose () {
      this.dialogVideoShow = false
    },
    // 文章预览功能
    onPreview (content) {
      this.previewContent = content
      this.dialogPreviewShow = true
    },
    // 设置文章状态
    async setState (value) {
      try {
        const data = {
          id: value.id,
          state: null
        }
        if (value.state === 0) {
          data.state = 1
        } else {
          data.state = 0
        }
        await changeState(data)
        this.getArticlesList()
        this.$message.success('修改状态成功')
      } catch (error) {
        this.$message.error('修改状态失败')
      }

      // this.queryInfo.state = data.state
    },
    // 新增文章
    async onAddArticle () {
      if (!this.$refs.addRef.validateForm()) return
      try {
        await add(this.addForm)
        this.dialogAddShow = false
        this.getArticlesList()
        this.$message.success('新增文章成功')
      } catch (error) {
        this.$message.error('新增失败')
      }
    },
    addClose () {
      this.addForm.title = ''
      this.addForm.articleBody = ''
      this.addForm.videoURL = ''
    },
    // 删除文章
    deleteArticle (did) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          const data = {
            id: did
          }
          await remove(data)
          this.getArticlesList()
          // this.$message.success('删除成功')
        } catch (error) {
          this.$message.error('删除失败，请稍后再试')
        }
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 修改文章
    async editArticle () {
      if (!this.$refs.addRef.validateForm()) return
      try {
        const data = {
          id: this.editForm.id,
          title: this.addForm.title,
          articleBody: this.addForm.articleBody,
          videoURL: this.addForm.videoURL
        }
        await update(data)
        this.dialogeditShow = false
        this.$message.success('修改成功了，你真棒')
        this.getArticlesList()
      } catch (error) {
        this.$message.error('修改成功才怪')
      }
    },
    async editShow (id) {
      try {
        const dat = {
          id: id
        }
        const { data } = await detail(dat)
        this.editForm = data
        this.addForm.title = data.title
        this.addForm.articleBody = data.articleBody
        this.addForm.videoURL = data.videoURL
      } catch (error) {
        this.$message.error('获取数据失败')
      }
      this.dialogeditShow = true
    }

  }
}
</script>

<style scoped lang='less'>

    .container {
      position: relative;
      .el-card {
        margin: 10px;
        .el-form {
          display: flex;
          justify-content: space-between;
          .el-form-item {
            width: 265px;
            margin: 0;
            margin-left: 30px;
            .edit {
              right: 0;
            }
          }
          .btn {
            margin-left: 0;
          }
        }
        .el-alert {
          margin: 10px auto;
        }
        .fenye {
          width: 100%;
          position: relative;
          // background-color: red;
          height: 32px;
          .el-pagination {
            position: absolute;
            right: 0;
            margin: 10px;
          }
        }
        /deep/ .el-table {
          .el-link {
            margin-right: 5px;
          }
          .el-icon-film {
            color: #3b3bfe;
          }
          tr.el-table__row {
            height: 20px !important;
          }
        }
        .custom-class {
          background-color: aqua !important;
        }
      }

      /deep/ .el-dialog {
        position: relative;
        .el-dialog__body {
          margin: 0;
          padding: 0;
          .close {
            position: absolute;
            left: 50%;
            top: -80px;
            transform: translateX(-50%);
            width: 50px;
            height: 50px;
            background-color: #000;
            opacity: 0.3;
            color: #fff;
            text-align: center;
            line-height: 50px;
            font-size: 25px;
            border-radius: 50%;
          }
          .el-dialog__body:hover{
            display: block;
          }

        }
      }
      /deep/ .video {
        .el-dialog {
           .el-dialog__header {
            display: none;
          }
        }
      }
      /deep/ .preview {
        .el-dialog {
          width: 800px;
          .el-dialog__body {
            width: 100%;
          padding: 0 45px;
          padding-bottom: 10px;
          }
        }
      }

    }
</style>
